<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">
			<el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
				:class="method==='view'?'readonly':''" :disabled="method==='view'" label-width="120px">
				<el-row :gutter="15">
					<el-col :span="12">
						<el-form-item label="企业名称" prop="companyName" :rules="[
                  {required: true, message:'企业名称不能为空', trigger:'blur'}
                 ]">
							<el-input v-model="inputForm.companyName" placeholder="请填写企业名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="等级评级" prop="gradeRatings" :rules="[
                  {required: true, message:'等级评级不能为空', trigger:'blur'}
                 ]">
							<el-select v-model="inputForm.gradeRatings" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('grade_ratings')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所在地（省市）" prop="area" :rules="[
                  {required: true, message:'所在地（省、市）不能为空', trigger:'blur'}
                 ]">
							<CityPicker style="width:100%" :value="inputForm.area" :clearable="true" :accordion="true"
								@getValue="(value) => {inputForm.area=value}" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="详细地址" prop="detailedArea" :rules="[
                  {required: true, message:'详细地址不能为空', trigger:'blur'}
                 ]">
							<el-input v-model="inputForm.detailedArea" placeholder="请填写详细地址"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业logo" prop="logo" :rules="[
                  {required: true, message:'企业logo不能为空', trigger:'blur'}
                 ]">
							<el-upload ref="logo" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/enterpriseinformation/enterpriseInformation`"
								:headers="{token: $cookie.get('token')}"
								:on-preview="(file, fileList) => {$window.location.href = (file.response && file.response.url) || file.url}"
								:on-success="(response, file, fileList) => {
                       inputForm.logo = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
                    }" :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        $message.success(data.msg)
                      })
                      inputForm.logo = fileList.map(item => item.url).join('|')
                    }" :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }" multiple :limit="5" :on-exceed="(files, fileList) =>{
                      $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
                    }" :file-list="logoArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="营业执照" prop="businessLicenseEnterprise" :rules="[
                  {required: true, message:'企业营业执照不能为空', trigger:'blur'}
                 ]">
							<el-upload ref="businessLicenseEnterprise" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/enterpriseinformation/enterpriseInformation`"
								:headers="{token: $cookie.get('token')}"
								:on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"
								:on-success="(response, file, fileList) => {
                       inputForm.businessLicenseEnterprise = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
                    }" :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        $message.success(data.msg)
                      })
                      inputForm.businessLicenseEnterprise = fileList.map(item => item.url).join('|')
                    }" :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }" multiple :limit="5" :on-exceed="(files, fileList) =>{
                      $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
                    }" :file-list="businessLicenseEnterpriseArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="企业介绍" prop="companyProfile" :rules="[
                  {required: true, message:'企业介绍不能为空', trigger:'blur'}
                 ]">
							<el-input type="textarea" v-model="inputForm.companyProfile" placeholder="请填写企业介绍">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="服务类型" prop="serviceType" :rules="[
                  {required: true, message:'服务类型不能为空', trigger:'blur'}
                 ]">
							<el-select v-model="inputForm.serviceType" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('type_service')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="注册类型" prop="registrationType" :rules="[
                  {required: true, message:'注册类型不能为空', trigger:'blur'}
                 ]">
							<el-select v-model="inputForm.registrationType" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('type_registration')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="推荐按企业" prop="isRecommend" :rules="[
                  {required: true, message:'是否是推荐按企业不能为空', trigger:'blur'}
                 ]">
							<el-select v-model="inputForm.isRecommend" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('type_recommend')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否付费" prop="whetherPay" :rules="[
                  {required: true, message:'是否付费不能为空', trigger:'blur'}
                 ]">
							<el-select v-model="inputForm.whetherPay" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('yes_no')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="套餐价格" prop="packagePrice" :rules="[
                 ]">
							<el-input v-model="inputForm.packagePrice" placeholder="请填写套餐价格"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="客户经理" prop="customerManager.id" :rules="[
                 ]">
							<user-select :limit='1' :value="inputForm.customerManager.id"
								@getValue='(value) => {inputForm.customerManager.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="套餐开始时间" prop="startTime" :rules="[
                 ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.startTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="套餐结束时间" prop="endTime" :rules="[
                 ]">
							<el-date-picker style="width: 100%;" v-model="inputForm.endTime" type="datetime"
								value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="审核人" prop="checkManager.id" :rules="[
                 ]">
							<user-select :limit='1' :value="inputForm.checkManager.id"
								@getValue='(value) => {inputForm.checkManager.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="代理记账员" prop="accountManager.id" :rules="[
                 ]">
							<user-select :limit='1' :value="inputForm.accountManager.id"
								@getValue='(value) => {inputForm.accountManager.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业环境" prop="companyEnvironment" :rules="[
                 ]">
							<el-upload ref="companyEnvironment" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/enterpriseinformation/enterpriseInformation`"
								:headers="{token: $cookie.get('token')}"
								:on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"
								:on-success="(response, file, fileList) => {
                       inputForm.companyEnvironment = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
                    }" :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        $message.success(data.msg)
                      })
                      inputForm.companyEnvironment = fileList.map(item => item.url).join('|')
                    }" :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }" multiple :limit="5" :on-exceed="(files, fileList) =>{
                      $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
                    }" :file-list="companyEnvironmentArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- <el-form-item label="合同模板" prop="contractTemplate"
                :rules="[
                 ]">
            <WangEditor ref="contractTemplateEditor" v-model="inputForm.contractTemplate"/>
           </el-form-item> -->
						<el-form-item label="合同模板" prop="contractTemplate" :rules="[
                 ]">
							<el-upload ref="contractTemplateEditor" v-if="visible"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/hr/enterpriseinformation/enterpriseInformation`"
								:headers="{token: $cookie.get('token')}"
								:on-preview="(file) => {$window.open ((file.response && file.response.url) || file.url,'_blank') }"
								:on-success="(response, file, fileList) => {
                       inputForm.contractTemplate = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
                    }" :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        $message.success(data.msg)
                      })
                      inputForm.contractTemplate = fileList.map(item => item.url).join('|')
                    }" :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }" multiple :limit="1" :on-exceed="(files, fileList) =>{
                      $message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
                    }" :file-list="contractTemplateArra">
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">添加相关附件</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业余额" prop="balance" :rules="[
                 ]">
							<el-input v-model="inputForm.balance" placeholder="请填写企业余额"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="客服人员" prop="servicesysUser.id" :rules="[
                 ]">
							<user-select :limit='1' :value="inputForm.servicesysUser.id"
								@getValue='(value) => {inputForm.servicesysUser.id=value}'></user-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
            <el-form-item label="入职二维码" prop="qrCode"
                :rules="[
                  {required: true, message:'入职二维码不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.qrCode" placeholder="请填写入职二维码"     ></el-input>
           </el-form-item>
        </el-col> -->
					<!-- <el-col :span="12">
            <el-form-item label="劳务派遣入职二维码" prop="dispatchqrcode"
                :rules="[
                  {required: true, message:'劳务派遣入职二维码不能为空', trigger:'blur'}
                 ]">
              <el-input v-model="inputForm.dispatchqrcode" placeholder="请填写劳务派遣入职二维码"     ></el-input>
           </el-form-item>
        </el-col> -->
					<el-col :span="12">
						<el-form-item label="社会信用统一代码" prop="socialCredit" :rules="[
                  {required: true, message:'社会信用统一代码不能为空', trigger:'blur'}
                 ]">
							<el-input v-model="inputForm.socialCredit" placeholder="请填写社会信用统一代码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注信息" prop="remarks" :rules="[
                 ]">
							<el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="visible = false">关闭</el-button>
				<el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
  import CityPicker from '@/components/cityPicker'
  import WangEditor from '@/components/editor/WangEditor'
  import UserSelect from '@/components/userSelect'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        businessLicenseEnterpriseArra: [],
        logoArra: [],
        companyEnvironmentArra: [],
        contractTemplateArra:[],
        inputForm: {
          id: '',
          companyName: '',
          area: '',
          detailedArea: '',
          businessLicenseEnterprise: '',
          gradeRatings: '',
          companyProfile: '',
          whetherPay: '',
          packagePrice: '',
          startTime: '',
          endTime: '',
          contractTemplate: '',
          registrationType: '',
          serviceType: '',
          customerManager: {
            id: ''
          },
          checkManager: {
            id: ''
          },
          accountManager: {
            id: ''
          },
          logo: '',
          servicesysUser: {
            id: ''
          },
          isRecommend: '',
          qrCode: '',
          dispatchqrcode: '',
          balance: '',
          companyEnvironment: '',
          socialCredit: '',
          remarks: ''
        }
      }
    },
    components: {
      CityPicker,
      WangEditor,
      UserSelect
    },
    methods: {
      init (method, id) {
        this.method = method
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建企业信息`
        } else if (method === 'edit') {
          this.title = '修改企业信息'
        } else if (method === 'view') {
          this.title = '查看企业信息'
        }
        this.businessLicenseEnterpriseArra = []
        this.logoArra = []
        this.companyEnvironmentArra = []
        this.contractTemplateArra = []
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          // this.$refs.contractTemplateEditor.init('')
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.enterpriseInformation)
              // this.$refs.contractTemplateEditor.init(this.inputForm.contractTemplate)
              this.inputForm.businessLicenseEnterprise.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.businessLicenseEnterpriseArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
                }
              })
              this.inputForm.logo.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.logoArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
                }
              })
              this.inputForm.companyEnvironment.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.companyEnvironmentArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
                }
              })
              this.inputForm.contractTemplate.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.contractTemplateArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
                }
              })
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/dlyrl/hr/enterpriseinformation/enterpriseInformation/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              this.loading = false
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    }
  }
</script>
